<template>
  <div>
    <el-dialog class="dialog" title="渠道设置" :visible.sync="dialogVisible">
      <p style="font-size: 13px;color: #666666;">系统默认来源不得修改与删除。</p>
      <el-input placeholder=" 多个来源以逗号隔开" v-model="channelInsertStr" style="margin: 13px 0">
        <el-button slot="append" @click="handleInsert">确认添加</el-button>
      </el-input>
      <el-table :data="list" v-loading="loading">
        <el-table-column prop="channel" label="渠道来源"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span v-if="scope.row.systemCreate" style="font-size:13px;color: #666666">系统默认</span>
            <span v-else>
              <a class="edit" href="javascript:void(0)" style="margin: 0"
                 @click="handleEdit(scope.row)">编辑</a>
              <a class="delete" href="javascript:void(0)"
                 @click="handleDelete(scope)">删除</a>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;padding-top: 10px">
        <el-pagination layout="total,prev, pager, next"
                       :current-page.sync="currentPage"
                       :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/babel">

  import { queryChannel, optionChannel } from '@/service/getData'

export default {
    data () {
      return {
        loading: false,
        msg: 'channel',
        dialogVisible: false,
        channelInsertStr: '',
        list: [],
        page: {
          current: 1,
          pages: 1,
          size: 10,
          total: 0
        },
        currentPage: 1
      }
    },
    methods: {
      axiosQueryChannel (payload) {
        // this.loading = true;
        this.loading = true
        this.$nextTick(() => {
          queryChannel(payload)
            .then((res) => {
              if (res.data && 'code' in res.data && res.data.code === 1) {
                var resJson = res.data
                this.list = resJson.data.list
                this.page = resJson.data.page
              }
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      axiosOptionChannel (payload, cb) {
        optionChannel(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.$message({
                type: 'info',
                message: resJson.msgZ || data.msgE
              })
              cb(resJson)
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleCurrentChange () {
        this.axiosQueryChannel({
          'page': this.currentPage, // 当前页
          'size': 10 // 分页条数
        })
      },
      // 编辑|更新 渠道
      handleEdit (row) {
        this.$prompt('重命名渠道【' + row.channel + '】', '修改渠道名称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          this.axiosOptionChannel(
            {
              'cid': row.cid, // 渠道Id  当option为0,1 的时候该字段不允许为空
              'channel': value, // 渠道来源,当option为0,2 的时候该字段不允许为空,新增渠道来源可以用,分隔添加多个
              'option': 0 // 渠道操作 0:表示更新，1:表示删除,2:表示增加渠道
            },
            () => {
              this.$nextTick(() => {
                row.channel = value
              })
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消重命名渠道【' + row.channel + '】'
          })
        })
      },
      // 删除 渠道
      async handleDelete ({row, $index}) {
        await this.$confirm('是否确认删除', '请确认')
        this.axiosOptionChannel(
          {
            'cid': row.cid, // 渠道Id  当option为0,1 的时候该字段不允许为空
            'channel': '', // 渠道来源,当option为0,2 的时候该字段不允许为空,新增渠道来源可以用,分隔添加多个
            'option': 1 // 渠道操作 0:表示更新，1:表示删除,2:表示增加渠道
          },
          () => {
            // this.list.splice($index, 1);
            // this.page.total = this.page.total - 1;
            // this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange();
            // console.log(this.currentPage, Math.ceil((this.page.total - 1) / 10));
            this.$nextTick(() => {
              this.currentPage === Math.ceil((this.page.total - 1) / 10) ? this.handleCurrentChange() : this.currentPage = Math.ceil((this.page.total - 1) / 10)
            })
          })
      },
      // 添加 渠道
      handleInsert () {
        if (!this.channelInsertStr) {
          this.$message({
            type: 'warning',
            message: '添加渠道为空'
          })
          return null
        }
        this.axiosOptionChannel(
          {
            'cid': '', // 渠道Id  当option为0,1 的时候该字段不允许为空
            'channel': this.channelInsertStr, // 渠道来源,当option为0,2 的时候该字段不允许为空,新增渠道来源可以用,分隔添加多个
            'option': 2 // 渠道操作 0:表示更新，1:表示删除,2:表示增加渠道
          },
          () => {
            this.$nextTick(() => {
              this.axiosQueryChannel({
                'page': this.currentPage, // 当前页
                'size': 10 // 分页条数
              })
            })
          })
      },
      init () {
        this.dialogVisible = true
      // 回弹第一页
        this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
